<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>专家平台</title>
    <link rel="stylesheet" href="expert/css/base/reset.css">
    <link rel="stylesheet" href="expert/css/components/navbar.css">
    <link rel="stylesheet" href="expert/css/components/editor.css">
    <link rel="stylesheet" href="expert/css/components/messages.css">
    <link rel="stylesheet" href="expert/css/main.css">
</head>
<body>
    <nav class="navbar"> 
        <div class="nav-left">
            <div class="nav-item active">需求广场</div>
            <div class="nav-item">消息</div>
        </div>
        <div class="user-info">
            <span>张三</span>
            <div class="avatar"></div>
            <div class="user-dropdown">
                <div>手机号/邮箱：
                    <span id="user-contact">已登录的手机号或邮箱</span>
                </div>
                <div class="upload-avatar">
                    <img src="expert/assets/images/avatar-placeholder.png" alt="头像">
                    <a href="#" id="upload-avatar-link">上传/修改头像</a>
                </div>
                <button id="change-password-btn">修改密码</button>
            </div>
        </div>
    </nav>

     <!-- 需求广场容器 -->
    <div class="container">
        <div class="demand-grid">
            <div class="demand-square">
                <div class="demand-title">示例需求1</div>
                <button class="preview-btn">预览</button>
            </div>
            <div class="demand-square">
                <div class="demand-title">示例需求2</div>
                <button class="preview-btn">预览</button>
            </div>
        </div>

        <!-- 需求详情容器 -->
        <div class="demand-detail" style="display: none;">
            <div class="top-section">
                <div class="mind-map">
                    <h3>需求脑图</h3>
                    <div class="mindmap-area">脑图区域（可集成专业脑图库）</div>
                </div>
                <div class="description">
                    <h3>需求描述</h3>
                    <div class="description-text"></div>
                </div>
               
            
            </div>
        <div class="bottom-section">
        <textarea class="input-demand" placeholder="输入您的评论"></textarea>
        <div class="button-group">
            <button class="return-btn">返回需求广场</button>
            <button class="submit-btn">提交评论</button>
            
        </div> 
        </div>

        </div>
    </div>    

    <!-- 消息容器 -->
    <div class="messages-container">
    
    </div>

    <!-- 修改密码界面 -->
     
    <div class="change-password-container" style="display: none;">
        <div class="change-password-form">
            <div>手机号/邮箱：<span id="user-contact-display">已登录的手机号或邮箱</span></div>
            <div>
                验证码：<input type="text" id="verification-code">
                <button id="get-verification-code">获取</button>
            </div>
            <div>旧密码：<input type="password" id="old-password"></div>
            <div>新密码：<input type="password" id="new-password"></div>
            <button id="confirm-change-password">确认</button>
            <button id="return-to-user-info">返回</button>
        </div>
    </div>

    <script src="expert/js/app.js"></script>
</body>
</html>